import React from 'react';
import './BoldRecommendBadge.css';

// 胆推荐角标组件属性接口
interface BoldRecommendBadgeProps {
  /** 胆推荐内容 */
  boldRecommendation: string;
  /** 是否显示角标 */
  show?: boolean;
}

/**
 * 胆推荐角标组件
 * 用于在主队 VS 客队列中显示胆推荐信息
 */
const BoldRecommendBadge: React.FC<BoldRecommendBadgeProps> = ({ 
  boldRecommendation, 
  show = true 
}) => {
  // 如果不显示或没有胆推荐内容，则不渲染
  if (!show || !boldRecommendation || boldRecommendation.trim() === '' || boldRecommendation === 'none') {
    return null;
  }

  // 根据胆推荐类型显示不同文字
  const getDisplayText = (type: string) => {
    switch (type) {
      case 'recommend_bold':
        return '推荐胆';
      case 'recommend_stable':
        return '推荐稳胆';
      default:
        return type; // 兜底显示原始值
    }
  };

  return (
    <div className="bold-recommend-badge">
      <span className="bold-recommend-text">{getDisplayText(boldRecommendation)}</span>
    </div>
  );
};

export default BoldRecommendBadge;